<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/lib/layui-v2.5.5/css/layui.css"
          media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/public.css" media="all">
</head>
<body>
<!-- 搜索条件结束 -->

<!-- 报表界面开始 -->
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="container" style="height:550px;"></div>
<!-- 报表界面结束 -->

<script src="${pageContext.request.contextPath}/static/echarts/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/echarts/echarts.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['jquery', 'form', 'layer', 'laydate'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //初始化时间选择器
        laydate.render({
            elem: '#year',//绑定渲染的元素
            type: 'year',//控件选择类型
            value: new Date()//默认选中当前年份
        });

        function initCharts() {
            $.get("${pageContext.request.contextPath}/admin/charts/yearOfMoneyCharts", function (result) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('container'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '年度报表数据图',
                        left: 'center'
                    },
                    tooltip: {},
                    xAxis: {
                        data: result.yearList
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '营业额',
                            type: 'bar',
                            data: result.moneyList
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },"json")
        }

        initCharts()


    });
</script>
</body>
</html>
